<template>
  <div class="wrapper">
    <my-map
      :site="site"
      :site-lng-lats="siteLngLats"
      :places="places"
      @open-drawer="openDrawer"
    />
    <info-win
      :site="site"
      :site-images="siteImages"
      :panoramas="panoramas"
      :site-videos="siteVideos"
    />
    <my-drawer
      :drawer="drawer"
      :site-id="siteId"
      :ent-id="entId"
      :place="place"
      @close="drawerClose"
    />
  </div>
</template>

<script>
import {
  queryBaseLocations,
  getSingleBase,
  getBaseImages,
  getBaseVideo
} from '@/api/base'
import {
  queryPlaceLocations,
  queryPlace
} from '@/api/place'
import { queryOverallsBySiteId } from '@/api/panorama'
import MyMap from './components/MyMap'
import InfoWin from './components/InfoWin'
import MyDrawer from './components/MyDrawer'

export default {
  name: 'Display',
  components: {
    MyMap,
    InfoWin,
    MyDrawer
  },
  data() {
    const SITE_IMAGE_FILE_NAME = 'siteImage'
    const PANORAMA_IMAGE_FILE_NAME = 'overallImage'
    return {
      siteId: null,
      entId: null,
      siteLngLats: [],
      siteImages: [],
      panoramas: [],
      siteVideos: [],
      places: [],
      site: {},
      drawer: false,
      place: {},
      siteImgUrl: process.env.VUE_APP_BASE_IMAGE_API + SITE_IMAGE_FILE_NAME,
      panoramaImgUrl: process.env.VUE_APP_BASE_IMAGE_API + PANORAMA_IMAGE_FILE_NAME
    }
  },
  created() {
    this.siteId = Number.parseInt(this.$route.query.siteId)
    this.entId = Number.parseInt(this.$route.query.entId)
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.getSingleBase()
      this.queryBaseLocations()
      this.queryPlace()
      this.getBaseImages()
      this.queryOverallsBySiteId()
      this.getBaseVideo()
    },
    getSingleBase() { // 获取基地的文字介绍
      getSingleBase({ siteId: this.siteId })
        .then(response => {
          this.site = response.site
        })
        .catch(error => {
          console.log(error)
        })
    },
    queryBaseLocations() { // 获取基地的坐标
      queryBaseLocations({ siteId: this.siteId })
        .then(response => {
          this.siteLngLats = this.formatLngLats(response.lngLats)
        })
        .catch(error => {
          console.log(error)
        })
    },
    queryPlace() {
      queryPlace({
        placeId: -1,
        siteId: this.siteId,
        limit: -1,
        pageNumber: 0,
        type: ''
      })
        .then(response => {
          const placeList = response.places
          if (response.places.length !== 0) {
            const placeIds = (placeList.map(item => {
              return item.placeId
            })).join(',')
            this.queryPlaceLocations(placeIds, placeList)
          } else {
            this.placesLngLats = []
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    queryPlaceLocations(placeIds, placeList) {
      queryPlaceLocations({ placeIds })
        .then(response => {
          const placesLngLats = this.formatLngLats(response.lngLats)
          for (let i = 0; i < placesLngLats.length; i++) {
            placeList[i].lngLats = placesLngLats[i]
            // if (placeList[i].length !== 0) {
            //   placeList[i].vidoUrl = placeList[i].vidoUrl.replace('http', 'https')
            // }
          }
          this.places = placeList
        })
        .catch(error => {
          console.log(error)
        })
    },
    getBaseImages() {
      getBaseImages({ siteId: this.siteId })
        .then(response => {
          const siteImages = response.siteImages
          siteImages.map(item => {
            item.image = this.siteImgUrl + '/' + item.image
          })
          this.siteImages = siteImages
        })
        .catch(error => {
          console.log(error)
        })
    },
    queryOverallsBySiteId() {
      queryOverallsBySiteId({ siteId: this.siteId })
        .then(response => {
          const panorams = response.overalls
          panorams.map(item => {
            item.image = this.panoramaImgUrl + '/' + item.image
          })
          this.panoramas = panorams
        })
        .catch(error => {
          console.log(error)
        })
    },
    getBaseVideo() {
      getBaseVideo({ siteId: this.siteId })
        .then(response => {
          this.siteVideos = response.siteVideo
        })
        .catch(error => {
          console.log(error)
        })
    },
    openDrawer(place) {
      this.drawer = true
      this.place = place
    },
    drawerClose() {
      this.drawer = false
    },
    formatLngLats(lngLats) {
      if (lngLats.indexOf('#') === -1) {
        const tempArr = lngLats.split('@')
        return tempArr.map(item => {
          return item.split(',')
        })
      } else {
        const tempArr = lngLats.split('#')
        return tempArr.map(item => {
          return item.split('@').map(item => {
            return item.split(',')
          })
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  width:100%;
  height:100vh;
}
</style>
